<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Canvas study</title>
     <style>
          body {
               background: #f3f3f3;
               text-align: center;
          }
          #canvas{
               background: #fff;
          }
     </style>
     <script>
          window.onload = function () {
               let oCanvas = document.getElementById('canvas')
               let oc = oCanvas.getContext('2d')
               oc.moveTo(200, 100)
               oc.lineTo(300, 300)
               oc.lineTo(300, 100)
               oc.lineWidth='10'
               oc.strokeStyle='#ff6666'
               oc.closePath()
               oc.stroke()
               oc.fillStyle='skyblue'
               oc.fill()
               
          }
     </script>
</head>
<body>
     <canvas id='canvas' width="800" height="500">
          您的浏览器不支持canvas，请更新最新版的浏览器
     </canvas>
</body>
</html>